<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="行程天数">
        <el-input-number
          :disabled="type=='look'"
          v-model="dayTotal"
          controls-position="right"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="天数安排">
        <el-radio-group v-model="curday">
          <el-radio-button v-for="i in dayTotal" :key="i" :label="i"
            >第{{ i }}天</el-radio-button
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前天">
        <span>第{{ curday }}天</span>
      </el-form-item>
      <el-form-item label="行程地点">
        <el-tag
          :key="tag"
          v-for="tag in curdata.journey_site"
          :closable="type!='look'"
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible && type!='look'"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-if="!inputVisible && type!='look'" class="button-new-tag" size="small" @click="showInput"
          ><i class="iconfont icon-plus"></i>添加地点</el-button
        >
      </el-form-item>
      <el-form-item label="产品特色">
        <quilleditor v-model="curdata.journey_content"  :disabled="type=='look'"
        />
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import quilleditor from 'components/quilleditor';
import {deepClone} from 'common/js/util';
export default {
  components: {
    quilleditor
  },
  props: ['type'],
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      dayTotal: 1,
      curday: 1,
      jyData: []
    };
  },
  computed: {
    curdata() {
      return this.jyData[this.curday - 1];
    }
  },
  watch: {
    dayTotal: {
      handler: function(val) {
        this.handleChange(val);
      },
      immediate: true
    }
  },
  methods: {
    
    handleClose(tag) {
      this.curdata.journey_site.splice(
        this.curdata.journey_site.indexOf(tag),
        1
      );
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.curdata.journey_site.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleChange(val) {
      let obj = [...this.jyData];
      let len = val - this.jyData.length;
      for (let i = 0; i < len; i++) {
        obj.push({
          journey_site: [],
          journey_content: ''
        });
      }
      this.jyData = obj;
    },
    setData(value) {
      let obj = deepClone(value.journeyInfo)
      obj.dayInfoArr = obj.dayInfoArr || []
      this.dayTotal = obj.dayInfoArr.length
      obj.dayInfoArr.forEach(item => {
        item.journey_site = item.journey_site ? item.journey_site.split(",") : []
      })
      this.jyData = obj.dayInfoArr
      console.log('这边呢', this.jyData)
    },
    async getData() {
      let data = {};
      data.commodity_day_count = this.dayTotal;
      data.dayInfoArr = this.jyData.map((item, index) => {
        return {
          day: index + 1,
          journey_site: (item.journey_site || []).join(','),
          journey_content: item.journey_content
        };
      });
      let obj = {
        journeyInfo: data
      };
      return obj;
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 100px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
